<template>
  <div>
    <el-card shadow="never">
      <el-menu :default-active="active" @select="onSelect">
        <el-menu-item
          v-for="item in menus"
          :key="item.path"
          :index="item.path"
        >
          <i :class="item.meta.icon"></i>
          <g-link :to="item.path">{{ item.meta.title }}</g-link>
        </el-menu-item>
      </el-menu>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [
        {
          path: "/",
          meta: {
            type: "user",
            icon: "el-icon-star-off",
            title: "最新动态",
          }
        },
        {
          path: "/social",
          meta: {
            type: "user",
            icon: "el-icon-mobile-phone",
            title: "社交圈",
          }
        },
        {
          path: "/post",
          meta: {
            type: "user",
            icon: "el-icon-edit-outline",
            title: "博客列表",
          }
        },
        {
          path: "/project",
          meta: {
            type: "user",
            icon: "el-icon-service",
            title: "开源项目",
          }
        },
      ],
      active: this.$route.path
    };
  },
  methods: {
    onSelect(index) {
      this.$router.push(index);
    }
  },
};
</script>
